<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="background: #2f54eb"
          @click="() => add()"
          size="small"
          v-hasPermi="['report:set:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      size="mini"
      v-loading="loading">
      <el-table-column type="selection" width="40" align="center">
      </el-table-column>
      <el-table-column label="序号" width="50" align="center">
        <template slot-scope="scope">
          {{
            (queryParams.pageNum - 1) * queryParams.pageSize +
            (scope.$index + 1)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="reportName" label="报表名称" align="left"/>
      <el-table-column prop="operate" label="操作" width="150" align="center">
        <template slot-scope="scope"
          ><div>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="text" @click="() => preview(scope.row, 2)">预览</el-button>
            <el-button type="text" @click="() => design(scope.row)">设计</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      :fullscreen="true"
      append-to-body>
      <iframe
        :src="src"
        frameborder="no"
        style="width: 100%; height: 84vh"
        scrolling="auto"
      />
    </el-dialog>
  </div>
</template>

<script>
import {delInfo, reportList} from "@/api/app/report";

export default {
  name: "haveReport",
  dicts: ["pt_app_er_model_structure"],
  props: {
    appId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      total: 0,
      queryParams: { name: undefined, pageNum: 1, pageSize: 10 },
      multipleSelection: [],
      tableData: [],
      row: {},
      title:'',
      open: false,
      loading: false,
      src: "",
      dialogVisible: false,
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    close() {
      this.open = false;
      this.getList();
    },
    async getList() {
      this.loading = true;
      const res = await reportList({
        ...this.queryParams,
        appId: this.appId,
      });
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
      this.loading = false;
    },
    add() {
      this.src = `${process.env.VUE_APP_BASE_API}/ureport/designer`;
      this.title="报表设计";
      this.dialogVisible = true;
    },
    preview(report, type) {
      this.src = `${process.env.VUE_APP_BASE_API}/ureport/preview?_u=file:${report.reportUrl}`;
      console.log(this.src)
      this.title="报表预览";
      this.dialogVisible = true;
    },
    design(report) {
      this.src = `${process.env.VUE_APP_BASE_API}/ureport/designer?_u=file:${report.reportUrl}&reportId=${report.id}`;
      console.log(this.src)
      this.title="报表设计";
      this.dialogVisible = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除数据？')
        .then(() => {
          this.loading = true;
          return delInfo(ids);
        })
        .then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
::v-deep .el-dialog__header{
  padding:5px;
  background: #f2f2f2;
  border-bottom: 1px #cccccc solid;}
::v-deep .el-dialog__headerbtn{top:7px}

</style>
